<template>
	<view>
		<navbar title="我的地址" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<view class="con__box__title">
					<image src="/static/personal/addr.png" class="con__box__title__icon" mode=""></image>
					收件人
				</view>
				<view class="con__box__item">
					<view class="con__box__item__label">
						姓名
					</view>
					<input type="text" class="con__box__item__inp" placeholder="请输入姓名" v-model="form.username" />
				</view>
				<view class="con__box__item">
					<view class="con__box__item__label">
						电话
					</view>
					<input type="number" maxlength="11" v-model="form.mobile" class="con__box__item__inp" placeholder="请输入联系电话" />
				</view>
				<view class="con__box__item">
					<view class="con__box__item__label">
						地区
					</view>
					<view class="con__box__item__inp" style="color: grey;" v-if="!addr" @click="clickaddr(0)">
						请输入省.市.区
					</view>
					<view class="con__box__item__inp" v-else @click="clickaddr(0)">
						{{addr}}
					</view>
				</view>
				<view class="con__box__item" style="margin-bottom: 40rpx;">
					<view class="con__box__item__label">
						详细地址
					</view>
					<input type="text" class="con__box__item__inp" v-model="form.detail" placeholder="请详细到街道小区名" />
				</view>
				<u-button color="#3262FD" size="large" text="确认" :loading="loadinbtn" @click="submit"></u-button>
				
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" keyName="fullname" :columns="columns" @confirm="confirm"
			@change="changeHandler" @cancel='show=false'></u-picker>
	</view>
</template>

<script>
	const uniMapCo = uniCloud.importObject('uni-map-co')
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				show: false,
				columns: [
					[],
					[],
					[]
				],
				loading: false,
				loadinbtn:false,
				addr: '',
				form: {},
				id:null
			};
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					index,
					value
				} = e
				if (columnIndex != 2) {
					this.clickaddr(columnIndex + 1, value[columnIndex].adcode)
				}

			},
			async submit(){
				let {username,mobile,detail} = this.form
				if(!username){
					uni.$u.toast('请输入姓名')
					return
				}
				if(!mobile){
					uni.$u.toast('请输入手机号码')
					return
				}
				if(!this.addr){
					uni.$u.toast('请选择省市区')
					return
				}
				if(!detail){
					uni.$u.toast('请输入详细地址')
					return
				}
				let _this=this
				this.loadinbtn=true
				let res = await user.editAddress(this.form)
				if(res.data.code==1){
					uni.$u.toast('修改成功')
					setTimeout(()=>{
						uni.navigateBack()
						_this.loadinbtn=false
					},1000)
				}else{
					_this.loadinbtn=false
				}
			},
			confirm(e) {
				this.form.province=e.value[0].fullname
				this.form.city=e.value[1].fullname
				this.form.area=e.value[2].fullname
				this.addr=this.form.province+this.form.city+this.form.area
				this.show=false
			},
			async clickaddr(index, adcode) {
				this.loading = true
				let picker = this.$refs.uPicker
				let result = await uniMapCo.districtSearch({
					adcode
				});
				let res = result.result
				if (res.errCode == 0) {
					if (!this.show) {
						this.show = true
					}
					picker.setColumnValues(index, res.result.data)
					this.loading = false
					if (index == 2) {
						return
					}
					this.clickaddr(index + 1, res.result.data[0].adcode)
				}
			},
			async getaddr(){
				let res = await user.getAddress({id:this.id})
				if(res.data.code==1){
					this.form=res.data.data
					this.addr=this.form.province+this.form.city+this.form.area
				}
			}
		},
		onLoad(o) {
			this.id=o.id
			this.getaddr()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 33rpx 30rpx 55rpx;
			&__title {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 30rpx;

				&__icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 14rpx;
				}
			}

			&__item {
				display: flex;
				align-items: center;
				height: 106rpx;
				border-bottom: 2rpx solid #F9F9F9;

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 38rpx;
				}

				&__inp {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #030303;
					line-height: 38rpx;
					flex: 1;
					text-align: right;
				}
			}
		}
	}
</style>